/**
 * Created by mapbar_front on 2019/8/7.
 */
/**
 * Created by mapbar_front on 2019/7/31.
 */
import React,{Component} from 'react';
import {ThemeContext,themes} from './../../utils/utils';
import ThemeButton from './../../components/ThemeButton/ThemeButton';


function Toolbar(props){
    console.log('Toolbar',props);
    return (
        <ThemeButton onClick={props.changeTheme}>
            Change Theme
        </ThemeButton>
    )
}

class Todo extends Component{
    constructor(props){
        super(props);
        this.state = {
            theme: themes.light,
        }
    }
    toggleTheme=()=>{
        console.log('切换主题');
        this.setState(state=>({
            theme: state.theme === themes.dark?themes.light:themes.dark
        }))
    }
    render(){
        return(
            <div>
                <ThemeContext.Provider value={this.state.theme}>
                    <Toolbar changeTheme={this.toggleTheme}/>
                </ThemeContext.Provider>
                <div>
                    <ThemeButton>123</ThemeButton>
                </div>
            </div>
        )
    }
}
export default Todo;


